<template>
	<!-- 首页 -->
	<div>
		<HEADER></HEADER>
		<div class="container">
			<div class="columns">
				<div class="mine-columns">

					<div class="card artCard" v-for="item in articleList" :key="item.Id">
						<div class="coverImg" v-if="item.cover" @click="goArticleDet(item.Id)">
							<img :src="item.cover">
						</div>
						<div class="article">
							<h1 class="name" @click="goArticleDet(item.Id)">{{item.name}}</h1>
							<div class="des">{{item.excerpt}}</div>
							<div class="pend">
								<div>
									<svg class="icon" aria-hidden="true">
										<use xlink:href="#icon-icon_calen"></use>
									</svg>
									<span>{{item.datetime}}</span>
									·<span>{{item.classify}}</span>
								</div>
								<span class="butt" @click="goArticleDet(item.Id)">继续阅读</span>
							</div>
						</div>
					</div>
					
				</div>
				<LeftView @buttClassfy="buttClassfy" @buttLable="buttLable"></LeftView>
				<RighthView @buttArticle="buttArticle" @buttArchive="buttArchive"></RighthView>
			</div>
		</div>
		<Gotop></Gotop>
		<FOOTER></FOOTER>
	</div>
</template>

<script>
	import {} from '../assets/font/iconfont.js'
	import HEADER from '../components/header.vue'
	import FOOTER from '../components/footer.vue'
	import LeftView from '../components/leftView.vue'
	import RighthView from '../components/righthView.vue'
	import Gotop from '../components/gotop.vue'
	export default {
		name: 'Home',
		data() {
			return {
				articleList:[]
			}
		},
		mounted() {
			this.getIndexArticle();
		},
		methods: {
			getIndexArticle(){
				this.$axios.post(this.HOST + '/api/indexPage').then(res => {
					for (let i=0;i<res.data.data.length;i++) {
						let date = res.data.data[i].datetime
						res.data.data[i].datetime = date.split('T')[0];
						this.articleList.push(res.data.data[i])
					}
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			// 跳转至文章详情
			goArticleDet(e){
				this.$router.push({
					path:'/Article',
					query:{ArtID:e},
				})
			},
			// 分类
			buttClassfy(e){
				this.$router.push({
					path:'/ArrayItem',
					query:{arr:e}
				})
			},
			// 标签
			buttLable(e){
				this.$router.push({
					path:'/ArrayItem',
					query:{arr:e}
				})
			},
			// 最近文章
			buttArticle(e){
				this.goArticleDet(e.ArtID)
			},
			// 归档
			buttArchive(e){
				this.$router.push({
					path:'/ArrayItem',
					query:{arr:e}
				})
			},
		},
		components: {
			HEADER: HEADER,
			FOOTER: FOOTER,
			LeftView: LeftView,
			RighthView: RighthView,
			Gotop: Gotop
		}
	}
</script>

<style>
	@import url("../assets/css/style.css");
</style>
